<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BlendModes</title>
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var stops = [];
        for (var i = 0; i < 6; i++)
            stops.push({ hue: (i - 3) * 60, saturation: 1, brightness: 1 });
        var size = new Size(150, 150)
        var background = new Path.Rectangle({
            rectangle: new Rectangle(size),
            fillColor: {
                stops: stops,
                origin: [0, 0],
                destination: [size.width, 0]
            }
        });

        var image = new Raster('ducky');
        image.fitBounds(background.bounds);

        background = new SymbolDefinition(background);
        image = new SymbolDefinition(image);

        var all = new Group();
        function makeExample(point, blendMode) {
            var rect = background.place();
            // var img = new Raster('ducky');
            var img = image.place();
            img.fitBounds(rect.bounds);
            img.blendMode = blendMode;
            var text = new PointText({
                point: [0, size.height / 2 + 15],
                fontSize: 14,
                justification: 'center',
                content: mode + (paper.support.nativeBlendModes[mode] ? ' (native)' : '')
            })
            var group = new Group(rect, img, text);
            group.position = point;
            all.addChild(group);
        }

        var modes = [ 'normal', 'multiply', 'screen', 'overlay', 'soft-light',
            'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
            'difference', 'exclusion', 'hue', 'saturation', 'luminosity',
            'color', 'add', 'subtract', 'average', 'pin-light', 'negation'];
        var columns = 5;
        var rows = Math.ceil(modes.length / columns);
        for (var y = 0, i = 0; y < rows; y++) {
            for (var x = 0; x < columns; x++) {
                var mode = modes[i];
                if (!mode)
                    break;
                var point = (new Point(x, y) + 0.5) * (size + 20);
                makeExample(point, mode);
                i++;
            }
        }

        // all.opacity = 0.5;
        all.position = view.center;

        var svg = project.exportSVG();
        document.body.appendChild(svg);
        //console.log(svg, new XMLSerializer().serializeToString(svg));
    </script>
</head>
<body>
    <h2>Paper.js Canvas</h2>
    <canvas id="canvas" width="800" height="850"></canvas>
    <h2>SVG Export</h2>
    <div class id="svg"></div>
    <img id="ducky" style="display:none;" src="" />
</body>
</html>
